<template>
  <!-- 物业通知发布主容器 -->
  <div class="send-property-container">
    <!-- 表单头部标题区域 -->
    <div class="form-header">
      <i class="el-icon-document"></i> 物业通知发布
    </div>

    <!-- 表单内容区域 -->
    <div class="form-content">
      <!-- 主表单：使用Element UI的表单组件，具有表单验证功能 -->
      <el-form :model="formData" label-position="right" label-width="100px" ref="form" :rules="rules">

        <!-- 小区选择：下拉菜单，用于选择要发布通知的小区 -->
        <el-form-item label="选择小区" prop="communityId">
          <el-select
            v-model="formData.communityId"
            placeholder="请选择小区"
            class="full-width"
            @change="handleCommunityChange">
            <el-option
              v-for="item in communityList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <!-- 通知类型：下拉菜单，选择发布的通知类型 -->
        <el-form-item label="通知类型" prop="noticeTypeId">
          <el-select
            v-model="formData.noticeTypeId"
            placeholder="请选择通知类型"
            class="full-width">
            <el-option
              v-for="item in noticeTypeList"
              :key="item.id"
              :label="item.type"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <!-- 通知标题：带字数限制的输入框 -->
        <el-form-item label="通知标题" prop="title">
          <el-input
            v-model="formData.title"
            placeholder="不能超过120个字"
            maxlength="120"
            show-word-limit>
          </el-input>
        </el-form-item>

        <!-- 通知内容：简化的文本编辑区域，移除无功能的工具栏 -->
        <el-form-item label="通知内容" prop="content" class="content-editor">
          <el-input
            type="textarea"
            v-model="formData.content"
            :rows="10"
            placeholder="请输入通知内容">
          </el-input>
        </el-form-item>

        <!-- 附件上传区域：支持多文件上传，提供格式和大小限制提示 -->
        <el-form-item label="文件上传" prop="attachments">
          <el-upload
            class="upload-demo"
            action="/api/notice-server/notice/upload"
            :auto-upload="true"
            :headers="uploadHeaders"
            :on-success="handleUploadSuccess"
            :on-error="handleUploadError"
            :on-remove="handleRemoveFile"
            :before-upload="beforeUploadFile"
            :file-list="uploadedFiles"
            ref="upload"
            multiple>
            <el-button size="small" type="primary">
              <i class="el-icon-upload2"></i> 选择附件
            </el-button>
            <div class="el-upload__tip" slot="tip">
              支持格式: .rar .zip .doc .docx .pdf，单个文件不超过20MB
            </div>
          </el-upload>
        </el-form-item>

        <!-- 接收范围选择：单选按钮组，选择通知发送给全体业主还是指定楼宇 -->
        <el-form-item label="接收范围" prop="receiveRange">
          <el-radio-group v-model="formData.receiveRange">
            <el-radio label="all">全体业主</el-radio>
            <el-radio label="specific">指定楼宇</el-radio>
            <el-radio label="property">物业</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 已选楼宇显示区域：条件渲染，仅当选择了指定楼宇时显示 -->
        <el-form-item
          label="已选楼宇"
          v-if="formData.receiveRange === 'specific'"
          prop="selectedBuildings">
          <div class="selected-buildings">
            <el-tag
              v-for="building in selectedBuildingsList"
              :key="building.id"
              closable
              @close="removeBuildingTag(building.id)"
              class="building-tag">
              {{ building.name }}
            </el-tag>
            <el-button
              size="small"
              @click="openBuildingSelector"
              type="primary"
              plain>
              <i class="el-icon-plus"></i> 选择楼宇
            </el-button>
          </div>
        </el-form-item>

        <!-- 发布人信息输入框 -->
        <el-form-item label="发布人" prop="publisher">
          <el-input
            v-model="formData.publisher"
            placeholder="请输入发布人">
          </el-input>
        </el-form-item>

        <!-- 发布类型选择 -->
        <el-form-item label="发布类型" prop="publishType">
          <el-radio-group
            v-model="formData.publishType"
            @change="handlePublishTypeChange">
            <el-radio :label="0">立即发布</el-radio>
            <el-radio :label="1">定时发布</el-radio>
            <el-radio :label="2">周期发布</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 定时发布时间选择：仅在选择定时发布时显示 -->
        <el-form-item
          label="定时发布时间"
          prop="publishTime"
          v-if="formData.publishType === 1">
          <el-date-picker
            v-model="formData.publishTime"
            type="datetime"
            placeholder="选择定时发布时间"
            format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm"
            :picker-options="publishTimePickerOptions">
          </el-date-picker>
        </el-form-item>

        <!-- 周期发布选项：仅在选择周期发布时显示 -->
        <template v-if="formData.publishType === 2">
          <!-- 周期类型选择 -->
          <el-form-item label="周期类型" prop="scheduleType">
            <el-select
              v-model="formData.scheduleType"
              placeholder="请选择周期类型"
              @change="handleScheduleTypeChange">
              <el-option label="分钟" value="MINUTES"></el-option>
              <el-option label="小时" value="HOURS"></el-option>
              <el-option label="天" value="DAYS"></el-option>
              <el-option label="周" value="WEEKS"></el-option>
              <el-option label="月" value="MONTHS"></el-option>
              <el-option label="Cron表达式" value="CRON"></el-option>
            </el-select>
          </el-form-item>

          <!-- 普通周期类型的配置选项 -->
          <template v-if="formData.scheduleType && formData.scheduleType !== 'CRON'">
            <!-- 间隔时间设置 -->
            <el-form-item label="间隔时间" prop="scheduleInterval">
              <el-input-number
                v-model="formData.scheduleInterval"
                :min="1"
                :max="60">
              </el-input-number>
              <span class="schedule-unit">{{ scheduleTypeUnit }}</span>
            </el-form-item>

            <!-- 开始时间设置 -->
            <el-form-item label="开始时间" prop="scheduleStartTime">
              <el-date-picker
                v-model="formData.scheduleStartTime"
                type="datetime"
                placeholder="选择开始时间"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm">
              </el-date-picker>
            </el-form-item>

            <!-- 按周发布时的星期选择 -->
            <el-form-item
              label="星期几"
              prop="weekDay"
              v-if="formData.scheduleType === 'WEEKS'">
              <el-select v-model="formData.weekDay" placeholder="请选择星期几">
                <el-option
                  v-for="(day, index) in weekDays"
                  :key="index + 1"
                  :label="day"
                  :value="index + 1">
                </el-option>
              </el-select>
            </el-form-item>

            <!-- 按月发布时的日期选择 -->
            <el-form-item
              label="每月几号"
              prop="monthDay"
              v-if="formData.scheduleType === 'MONTHS'">
              <el-select v-model="formData.monthDay" placeholder="请选择每月几号">
                <el-option
                  v-for="day in 31"
                  :key="day"
                  :label="`${day}号`"
                  :value="day">
                </el-option>
              </el-select>
            </el-form-item>
          </template>

          <!-- Cron表达式输入：高级用户使用 -->
          <el-form-item
            label="Cron表达式"
            prop="cronExpression"
            v-if="formData.scheduleType === 'CRON'">
            <el-input
              v-model="formData.cronExpression"
              placeholder="例如: 0 0 8 * * ? (每天早上8点)">
            </el-input>
            <div class="el-form-item__tip">
              Cron表达式格式: 秒 分 时 日 月 周
            </div>
          </el-form-item>
        </template>

        <!-- 表单操作按钮区域 -->
        <el-form-item class="form-actions">
          <el-button @click="cancelForm">取消</el-button>
          <el-button type="primary" @click="submitForm">提交</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 楼宇选择模态框：弹出式对话框，用于选择接收通知的楼宇 -->
    <el-dialog
      title="选择楼宇"
      :visible.sync="showBuildingModal"
      width="50%"
      :before-close="closeBuildingSelector">
      <div v-loading="isLoading">
        <!-- 无数据显示 -->
        <div v-if="buildingList.length === 0" class="no-building-data">
          <i class="el-icon-warning"></i>
          <span>没有找到该小区的楼宇数据</span>
        </div>
        <!-- 楼宇多选框列表 -->
        <el-checkbox-group v-model="tempSelectedBuildings" v-else class="building-checkbox-list">
          <el-checkbox 
            v-for="building in buildingList"
            :key="building.id"
            :label="building.id">
            {{ building.name }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeBuildingSelector">取消</el-button>
        <el-button type="primary" @click="confirmBuildingSelection">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  // 组件名称：物业通知发布组件
  name: 'SendProperty',

  data() {
    // 自定义验证器：通知内容和文件至少填写一项
    // 确保用户至少提供了内容或附件之一，两者不能同时为空
    const validateContentOrFile = (rule, value, callback) => {
      if (!this.formData.content && this.uploadedFiles.length === 0) {
        callback(new Error('通知内容和附件至少需要提供一项'));
      } else {
        callback();
      }
    };

    // 验证楼宇选择：当选择指定楼宇时，确保至少选择了一个楼宇
    const validateBuildings = (rule, value, callback) => {
      if (this.formData.receiveRange === 'specific' && (!value || value.length === 0)) {
        callback(new Error('请选择至少一个楼宇'));
      } else {
        callback();
      }
    };

    // 验证Cron表达式：检查Cron表达式格式是否正确
    const validateCronExpression = (rule, value, callback) => {
      if (this.formData.publishType === 2 && this.formData.scheduleType === 'CRON') {
        if (!value) {
          callback(new Error('请输入Cron表达式'));
        } else {
          // 简单的Cron表达式验证：6个字段用空格分隔
          const cronRegex = /^(\S+\s+){5}\S+$/;
          if (!cronRegex.test(value)) {
            callback(new Error('Cron表达式格式不正确，请检查'));
          } else {
            callback();
          }
        }
      } else {
        callback();
      }
    };

    return {
      // 上传文件时的请求头，包含认证token
      uploadHeaders: {
        token: localStorage.getItem('token')
      },

      // 表单数据对象：包含通知发布所需的所有字段
      formData: {
        communityId: '',         // 小区ID
        noticeTypeId: '',        // 通知类型ID
        title: '',               // 通知标题
        content: '',             // 通知内容
        fileList: [],            // 已上传文件列表
        receiveRange: 'all',     // 接收范围：all-全体业主，specific-指定楼宇，property-物业
        publisher: '',           // 发布人姓名
        publishTime: this.formatDateTime(new Date()), // 发布时间
        selectedBuildings: [],   // 已选楼宇ID列表
        publishType: 0,          // 发布类型：0-立即发布，1-定时发布，2-周期发布

        // 周期发布相关字段
        scheduleType: '',        // 周期类型
        scheduleInterval: 1,     // 间隔时间
        scheduleStartTime: this.formatDateTime(new Date()), // 周期开始时间
        weekDay: 1,             // 星期几（用于按周发布）
        monthDay: 1,            // 每月几号（用于按月发布）
        cronExpression: '',     // Cron表达式
      },

      // 组件状态数据
      uploadedFiles: [],         // 已上传的文件列表
      communityList: [],         // 小区列表
      noticeTypeList: [],        // 通知类型列表
      buildingList: [],          // 楼宇列表
      isLoading: false,          // 加载状态标志
      showBuildingModal: false,  // 楼宇选择模态框显示状态
      tempSelectedBuildings: [], // 临时存储模态框中选择的楼宇ID

      // 星期选项数据
      weekDays: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
      weekDays: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'], // 星期列表：用于显示星期选择

      // 表单验证规则：Element UI表单验证配置
      rules: {
        communityId: [
          { required: true, message: '请选择小区', trigger: 'change' }
        ],
        noticeTypeId: [
          { required: true, message: '请选择通知类型', trigger: 'change' }
        ],
        title: [
          { required: true, message: '请输入通知标题', trigger: 'blur' },
          { max: 120, message: '标题长度不能超过120个字符', trigger: 'blur' }
        ],
        content: [
          { validator: validateContentOrFile, trigger: 'blur' }
        ],
        attachments: [
          { validator: validateContentOrFile, trigger: 'change' }
        ],
        selectedBuildings: [
          { validator: validateBuildings, trigger: 'change' }
        ],
        publisher: [
          { required: true, message: '请输入发布人', trigger: 'blur' }
        ],
        publishTime: [
          { required: true, message: '请选择发布时间', trigger: 'change' }
        ],
        scheduleType: [
          { required: true, message: '请选择周期类型', trigger: 'change' }
        ],
        scheduleInterval: [
          { required: true, message: '请输入间隔时间', trigger: 'blur' }
        ],
        scheduleStartTime: [
          { required: true, message: '请选择开始时间', trigger: 'change' }
        ],
        cronExpression: [
          { validator: validateCronExpression, trigger: 'blur' }
        ]
      }
    }
  },

  computed: {
    /**
     * 计算属性：获取已选择的楼宇详细信息
     * 根据已选择的楼宇ID从楼宇列表中过滤出完整的楼宇对象，用于显示楼宇标签
     * @returns {Array} 已选择的楼宇对象数组
     */
    selectedBuildingsList() {
      return this.buildingList.filter(building =>
        this.formData.selectedBuildings.includes(building.id)
      );
    },

    /**
     * 计算属性：发布时间选择器选项
     * 禁用过去的日期，只允许选择今天及以后的时间
     * @returns {Object} 时间选择器配置对象
     */
    publishTimePickerOptions() {
      return {
        disabledDate: (time) => {
          const today = new Date();
          today.setHours(0, 0, 0, 0);
          return time.getTime() < today.getTime();
        }
      };
    },

    /**
     * 计算属性：根据周期类型显示对应的单位
     * 用于在间隔时间输入框后显示相应的时间单位
     * @returns {String} 时间单位文本
     */
    scheduleTypeUnit() {
      const unitMap = {
        'MINUTES': '分钟',
        'HOURS': '小时',
        'DAYS': '天',
        'WEEKS': '周',
        'MONTHS': '月'
      };
      return unitMap[this.formData.scheduleType] || '';
    }
  },
  created() {
    // 组件创建生命周期钩子：页面创建时加载基础数据
    this.fetchCommunities(); // 获取小区列表数据
    this.fetchNoticeTypes(); // 获取通知类型列表数据
  },

  methods: {
    /**
     * 格式化日期时间为 YYYY-MM-DD HH:MM 格式
     * 用于格式化日期时间显示，确保发布时间格式统一
     * @param {Date} date - 日期对象
     * @return {string} 格式化后的日期字符串
     */
    formatDateTime(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}`;
    },

    /**
     * 格式化日期时间为服务器需要的格式（包含秒）
     * @param {Date|String} dateObj - 日期对象或字符串
     * @return {string} 格式化后的日期字符串
     */
    formatDateForServer(dateObj) {
      const date = new Date(dateObj);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },

    /**
     * 上传文件前验证
     * 验证文件类型和大小，防止上传不符合要求的文件
     * @param {Object} file - 要上传的文件对象
     * @return {Boolean} 验证结果
     */
    beforeUploadFile(file) {
      const allowedExtensions = ['.rar', '.zip', '.doc', '.docx', '.pdf'];
      const maxSizeMB = 20;

      // 检查文件扩展名
      const isAllowed = allowedExtensions.some(ext =>
        file.name.toLowerCase().endsWith(ext)
      );
      // 检查文件大小
      const isLt20M = file.size / 1024 / 1024 < maxSizeMB;

      if (!isAllowed) {
        this.$message.error('只能上传 .rar .zip .doc .docx .pdf 格式的文件!');
        return false;
      }

      if (!isLt20M) {
        this.$message.error('文件大小不能超过 20MB!');
        return false;
      }

      return true;
    },

    /**
     * 处理文件上传成功
     * 保存文件信息到表单数据，用于后续提交
     * @param {Object} response - 服务器返回的响应数据
     * @param {Object} file - 上传的文件对象
     */
    handleUploadSuccess(response, file) {
      if (response.code === 622) {
        // 内容审核不通过
        this.$message.warning(response.msg || '审核不通过');

        // 从上传列表中删除该文件
        if (this.$refs.upload) {
          this.$refs.upload.handleRemove(file);
        }

        // 从已上传文件数组中也移除
        const index = this.uploadedFiles.findIndex(f => f.uid === file.uid);
        if (index !== -1) {
          this.uploadedFiles.splice(index, 1);
        }
      } else if (response?.code === 200 && response.data) {
        // 上传成功，保存文件信息
        this.formData.fileList.push({
          fileName: file.name,
          fileUrl: response.data.fileUrl || '',
          fileId: response.data.fileId || ''
        });
        this.$message.success(`${file.name} 上传成功`);
      } else {
        // 上传失败
        this.handleUploadError({message: response?.message || '上传失败'}, file);
      }
      this.validateAttachments();
    },

    /**
     * 处理文件上传失败
     * @param {Error} err - 上传错误对象
     * @param {Object} file - 上传的文件对象
     */
    handleUploadError(err, file) {
      this.$message.error(`${file.name} 上传失败: ${err.message || '服务器错误'}`);
      this.$refs.upload.handleRemove(file);
      this.validateAttachments();
    },

    /**
     * 移除已上传文件
     * 从上传列表中删除文件，并触发表单验证
     * @param {Object} file - 要删除的文件对象
     */
    handleRemoveFile(file) {
      // 从文件路径列表中移除对应的文件
      const index = this.formData.fileList.findIndex(item => item.fileName === file.name);
      if (index !== -1) {
        this.formData.fileList.splice(index, 1);
      }
      this.validateAttachments();
    },

    /**
     * 验证附件字段
     * 触发内容和附件的表单验证
     */
    validateAttachments() {
      this.$refs.form.validateField('attachments');
      this.$refs.form.validateField('content');
    },

    /**
     * 小区选择改变时重置相关数据
     * 当选择不同小区时，需要重新加载该小区的楼宇数据
     * @param {Number} communityId - 选择的小区ID
     */
    handleCommunityChange(communityId) {
      // 重置已选楼宇和楼宇列表，避免数据混乱
      this.formData.selectedBuildings = [];
      this.tempSelectedBuildings = [];
      this.buildingList = [];

      // 如果选择了小区，获取该小区的楼宇列表
      if (communityId) {
        this.fetchBuildingList(communityId);
      }
    },

    /**
     * 打开楼宇选择模态框
     * 显示楼宇选择弹窗，用于选择接收通知的楼宇
     */
    openBuildingSelector() {
      if (!this.formData.communityId) {
        this.$message.warning('请先选择小区');
        return;
      }

      // 初始化临时选择的楼宇列表
      this.tempSelectedBuildings = [...this.formData.selectedBuildings];
      this.showBuildingModal = true;
    },

    /**
     * 关闭楼宇选择模态框
     * 取消楼宇选择，关闭弹窗并清空临时选择数据
     */
    closeBuildingSelector() {
      this.showBuildingModal = false;
      this.tempSelectedBuildings = [];
    },

    /**
     * 确认楼宇选择
     * 确认选择结果，将临时选择的楼宇保存到表单数据中
     */
    confirmBuildingSelection() {
      this.formData.selectedBuildings = [...this.tempSelectedBuildings];
      this.showBuildingModal = false;

      // 触发表单验证
      this.$refs.form.validateField('selectedBuildings');
    },

    /**
     * 移除已选楼宇标签
     * 从已选楼宇中移除指定楼宇，用于标签的删除功能
     * @param {Number} buildingId - 要移除的楼宇ID
     */
    removeBuildingTag(buildingId) {
      const index = this.formData.selectedBuildings.indexOf(buildingId);
      if (index !== -1) {
        this.formData.selectedBuildings.splice(index, 1);
        this.$refs.form.validateField('selectedBuildings');
      }
    },

    /**
     * 提交表单
     * 校验表单数据并提交到服务器，实现通知发布功能
     * 包含表单验证、数据准备和表单提交
     */
    async submitForm() {
      this.$refs.form.validate(async valid => {
        if (!valid) {
          this.$message.error('表单填写有误，请检查');
          return false;
        }
        
        // 显示全屏加载状态，提升用户体验
        const loading = this.$loading({
          lock: true,
          text: '正在审核内容...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        try {
          // 先对通知内容进行审核
          const auditResponse = await this.$axios.get('/api/notice-server/notice/audit/'+this.formData.content);

          // 检查审核结果
          if (!auditResponse.data || auditResponse.data.code !== 200) {
            loading.close();
            this.$message.error('内容审核未通过: ' + (auditResponse.data?.message || '包含不适当内容'));
            return false;
          }

          // 内容审核通过，继续提交表单
          loading.text = '正在提交...';
          
          // 准备提交的数据对象
          const submitData = {
            // 确保ID是数字类型
            communityId: Number(this.formData.communityId),
            noticeTypeId: Number(this.formData.noticeTypeId),
            title: this.formData.title,
            content: this.formData.content,
            // 转换为逗号分隔的字符串
            filename: this.formData.fileList.map(file => file.fileName).join(','),
            fileUrl: this.formData.fileList.map(file => file.fileUrl).join(','),
            publisher: this.formData.publisher,
            // 发布类型
            publishType: this.formData.publishType,
            // 设置发布时间（对于立即发布使用当前时间，其他类型使用指定时间）
            publishTime: this.formData.publishType === 0 
              ? this.formatDateForServer(new Date()) 
              : this.formatDateForServer(this.formData.publishType === 1 
                  ? this.formData.publishTime 
                  : this.formData.scheduleStartTime),
            // 定时任务信息
            scheduledTime: this.formData.publishType > 0 
              ? this.formatDateForServer(this.formData.publishType === 1 
                  ? this.formData.publishTime 
                  : this.formData.scheduleStartTime) 
              : null,
            // 设置状态（立即发布为1-已发布，其他为0-待发布）
            status: this.formData.publishType === 0 ? 1 : 0,
            createTime: this.formatDateForServer(new Date()),
            updateTime: this.formatDateForServer(new Date()),
            // 添加接收对象标识字段
            object: this.formData.receiveRange === 'property' ? 1 : 0
          };
          
          // 周期发布的额外参数
          if (this.formData.publishType === 2) {
            // 构建xxl-job所需的任务信息
            submitData.scheduleInfo = {
              scheduleType: this.formData.scheduleType,
              scheduleInterval: Number(this.formData.scheduleInterval),
              startTime: this.formatDateForServer(this.formData.scheduleStartTime)
            };
            
            // 根据不同周期类型添加特定参数
            if (this.formData.scheduleType === 'WEEKS') {
              submitData.scheduleInfo.weekDay = Number(this.formData.weekDay);
            } else if (this.formData.scheduleType === 'MONTHS') {
              submitData.scheduleInfo.monthDay = Number(this.formData.monthDay);
            } else if (this.formData.scheduleType === 'CRON') {
              submitData.scheduleInfo.cronExpression = this.formData.cronExpression;
            }
            
            // 转为JSON字符串，方便后端解析并创建xxl-job任务
            submitData.scheduleInfo = JSON.stringify(submitData.scheduleInfo);
          }
          
          // 简化buildingIds处理逻辑
          if (this.formData.receiveRange === 'specific') {
            submitData.buildingIds = this.formData.selectedBuildings.map(Number);
          } else if (this.formData.receiveRange === 'all') {
            // 全体业主：设置为所有楼宇ID或默认值[0]
            submitData.buildingIds = this.buildingList.length > 0 
              ? this.buildingList.map(building => Number(building.id))
              : [0]; 
          } else if (this.formData.receiveRange === 'property') {
            // 物业：不需要设置buildingIds
            submitData.buildingIds = [];
          }

          // 最终检查确保buildingIds不为空
          if (this.formData.receiveRange !== 'property' && (!submitData.buildingIds || submitData.buildingIds.length === 0)) {
            submitData.buildingIds = [0];
          }

          // 发送请求到后端API，提交表单数据
          const response = await this.$axios.post('/api/notice-server/notice/addNotice', submitData, {
            headers: {
              'Content-Type': 'application/json'
            }
          });
          
          loading.close(); // 关闭加载动画
          
          // 增加null/undefined检查
          if (response && response.data && response.data.code === 200) {
            // 提交成功，显示成功提示并跳转到通知列表页
            this.$message.success('通知发布成功');
            this.$router.push('/property/propertyNotice');
          } else {
            // 提交失败，显示错误信息
            const message = response && response.data ? response.data.message : '发布失败，请重试';
            this.$message.error(message); 
          }
        } catch (error) {
          loading.close(); // 关闭加载动画
          // 增加更健壮的错误处理
          let errorMsg = '请检查网络连接后重试';
          if (error.response) {
            errorMsg = error.response.data?.message || '服务器响应错误';
          } else if (error.request) {
            errorMsg = '服务器未响应';
          } else if (error.message) {
            errorMsg = error.message;
          }
          this.$message.error('操作失败: ' + errorMsg);
        }
      });
    },

    /**
     * 处理发布类型变化
     * 根据发布类型重置相应的时间字段
     */
    handlePublishTypeChange() {
      if (this.formData.publishType === 1) {
        // 定时发布：默认设置为明天此时
        const tomorrow = new Date();
        tomorrow.setDate(tomorrow.getDate() + 1);
        this.formData.publishTime = this.formatDateTime(tomorrow);
      } else {
        // 立即发布或周期发布：设置为当前时间
        this.formData.publishTime = this.formatDateTime(new Date());
      }
    },

    /**
     * 处理周期类型变化
     * 根据周期类型重置相关字段为默认值
     */
    handleScheduleTypeChange() {
      this.formData.scheduleInterval = 1;
      this.formData.scheduleStartTime = this.formatDateTime(new Date());
      this.formData.weekDay = 1;
      this.formData.monthDay = 1;
      this.formData.cronExpression = '';
    },

    /**
     * 取消表单编辑
     * 提示用户确认，防止误操作导致数据丢失
     */
    cancelForm() {
      this.$confirm('确认取消编辑？未保存的内容将会丢失', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.back();
      }).catch(() => {
        // 用户取消操作，不做任何处理
      });
    },

    /**
     * 获取小区列表
     * 从服务器获取小区数据，用于下拉选择
     */
    async fetchCommunities() {
      try {
        const response = await this.$axios.get('/api/notice-server/notice/queryAllCommunity');
        if (response.data && response.data.code === 200) {
          this.communityList = response.data.data || [];
        } else {
          this.$message.error('获取小区列表失败: ' + (response.data?.message || '未知错误'));
        }
      } catch (error) {
        this.$message.error('获取小区列表失败');
        console.error('获取小区列表错误:', error);
      }
    },

    /**
     * 获取通知类型列表
     * 从服务器获取通知类型数据，用于下拉选择
     */
    async fetchNoticeTypes() {
      try {
        const response = await this.$axios.get('/api/notice-server/notice/queryAllTypes');
        if (response.data && response.data.code === 200) {
          this.noticeTypeList = response.data.data || [];
        } else {
          this.$message.error('获取通知类型列表失败: ' + (response.data?.message || '未知错误'));
        }
      } catch (error) {
        this.$message.error('获取通知类型列表失败');
        console.error('获取通知类型列表错误:', error);
      }
    },

    /**
     * 获取楼宇列表
     * 根据选择的小区加载对应的楼宇数据
     * @param {Number} communityId - 小区ID
     */
    async fetchBuildingList(communityId) {
      this.isLoading = true;
      try {
        const response = await this.$axios.get(`/api/notice-server/notice/queryAllBuildings/${communityId}`);
        if (response.data && response.data.code === 200) {
          this.buildingList = response.data.data || [];
        } else {
          this.$message.error('获取楼宇列表失败: ' + (response.data?.message || '未知错误'));
          this.buildingList = [];
        }
      } catch (error) {
        this.$message.error('获取楼宇列表失败');
        this.buildingList = [];
        console.error('获取楼宇列表错误:', error);
      } finally {
        this.isLoading = false;
      }
    },
  },
  watch: {
    /**
     * 监听接收范围变化
     * 当选择"指定楼宇"时，自动加载楼宇数据，提升用户体验
     * @param {String} newVal - 新的接收范围值
     */
    'formData.receiveRange': function(newVal) {
      if (newVal === 'specific' && this.buildingList.length === 0 && this.formData.communityId) {
        // 如果选择了"指定楼宇"且尚未加载楼宇列表，获取楼宇列表
        const selectedCommunity = this.communityList.find(c => c.id === this.formData.communityId);
        if (selectedCommunity) {
          this.fetchBuildingList(selectedCommunity.id);
        }
      }
    }
  }
}
</script>

<style scoped>
/* 主容器样式：为整个组件设置基本的间距和背景色 */
.send-property-container {
  padding: 20px;
  background: #fff;
}

/* 表单标题样式：设置标题的字体、边框和间距 */
.form-header {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

/* 表单内容区域样式：限制宽度并居中显示 */
.form-content {
  max-width: 900px;
  margin: 0 auto;
}

/* 全宽元素样式：使下拉菜单等元素占满容器宽度 */
.full-width {
  width: 100%;
}

/* 内容编辑器样式：设置编辑器的外边距 */
.content-editor {
  margin-bottom: 20px;
}

/* 已选楼宇区域样式：使用弹性布局显示楼宇标签 */
.selected-buildings {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* 楼宇标签样式：设置标签之间的间距 */
.building-tag {
  margin-right: 8px;
}

/* 楼宇选择列表样式：使用网格布局均匀排列多个楼宇选项 */
.building-checkbox-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  padding: 10px;
}

/* 无数据提示样式：居中显示无数据提示信息 */
.no-building-data {
  text-align: center;
  padding: 40px;
  color: #909399;
}

/* 表单操作区样式：设置按钮区域的间距和对齐方式 */
.form-actions {
  margin-top: 30px;
  text-align: center;
}

/* 上传提示文本样式：设置提示文本的颜色和字体大小 */
.el-upload__tip {
  color: #909399;
  font-size: 12px;
  margin-top: 8px;
}

/* 周期发布单位样式：显示时间单位 */
.schedule-unit {
  margin-left: 10px;
  color: #606266;
}

/* 表单项提示样式：用于显示额外的帮助信息 */
.el-form-item__tip {
  color: #909399;
  font-size: 12px;
  margin-top: 5px;
  line-height: 1.4;
}

/* Element UI 组件样式覆盖 */
/* 表单项标签样式：设置标签的字体粗细 */
:deep(.el-form-item__label) {
  font-weight: normal;
}

/* 表单项必填标记样式：为必填项添加红色星号标记 */
:deep(.el-form-item__label::before) {
  content: '*';
  color: #F56C6C;
  margin-right: 4px;
}

/* 表单项内容样式：调整行高 */
:deep(.el-form-item__content) {
  line-height: 32px;
}
</style>